<template>
  <div class="scene" :style="`--cube-size: ${cubeSize}`">
    <div class="cube" @click="onCubeClick">
      <div class="face front" @click.stop="onFaceClick('front')">1</div>
      <div class="face back" @click.stop="onFaceClick('back')">2</div>
      <div class="face right" @click.stop="onFaceClick('right')">3</div>
      <div class="face left" @click.stop="onFaceClick('left')">4</div>
      <div class="face top" @click.stop="onFaceClick('top')">5</div>
      <div class="face bottom" @click.stop="onFaceClick('bottom')">6</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 支持动态调整 cube 大小
// const cubeSize = ref('22px') // 你可以改成 100px, 150px 等
import { defineEmits, defineProps } from 'vue';
// 定义 props 和 emits
defineProps<{
  cubeSize?: string;
}>();

const emit = defineEmits<{
  (e: 'cube-click'): void;
  (e: 'face-click', face: string): void;
}>();

function onCubeClick() {
  emit('cube-click');
}

function onFaceClick(face: string) {
  emit('face-click', face);
}
</script>

<style scoped>
/* 使用 CSS 变量控制大小 */
.scene {
  --cube-size: 80px;
  --half-size: calc(var(--cube-size) / 2);

  width: 20px;
  height: 20px;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px auto;
}

.cube {
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: rotateCube 20s infinite linear;
}

.face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  background: linear-gradient(to bottom right, #0ff, #00aaff);
  border: 1px solid #0ff;
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(0, 255, 255, 0.5);
  color: white;
  font-size: calc(var(--cube-size) / 2.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* 六个面正确定位（绕中心点旋转 + Z 偏移一半厚度） */
.front {
  transform: rotateY(0deg) translateZ(var(--half-size));
}
.back {
  transform: rotateY(180deg) translateZ(var(--half-size));
}
.right {
  transform: rotateY(90deg) translateZ(var(--half-size));
}
.left {
  transform: rotateY(-90deg) translateZ(var(--half-size));
}
.top {
  transform: rotateX(90deg) translateZ(var(--half-size));
}
.bottom {
  transform: rotateX(-90deg) translateZ(var(--half-size));
}

@keyframes rotateCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
</style>
